<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>jianli</title>
        <link rel="stylesheet" href="a.css">
        <script src="//at.alicdn.com/t/font_798093_2xqozpyeld3.js">
        </script>
        <style type="text/css">
            .icon {
               width: 1em; height: 1em;
               vertical-align: -0.15em;
               fill: currentColor;
               overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="top-Nav-Bar ">
            <div class="top-Nav-Bar-inner clearfix">
               <a  class="logo" href="#" alt="logo" style="float: left;">
                <span class="rs">RS</span><span class="card">card</span>
                </a>
                <nav style="float: right;">
                    <ul class="clearfix">
                        <li>
                            <a href="#">关于</a>
                        </li>
                        <li>
                            <a href="#">技能</a>
                        </li>
                        <li>
                            <a href="#">作品</a>
                        </li>
                        <li>
                            <a href="#">博客</a>
                        </li>
                        <li>
                            <a href="#">日历</a>
                        </li>
                        <li>
                            <a href="#">联系方式</a>
                        </li>
                        <li>
                            <a href="#">其它</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="banner">
           <div class="mask"></div>
        </div>
        <main>
            <div class="userCard">
                <div class="pAt clearfix"> 
                    <div class="picture">
                        <img src="./touxiang.jpg" alt="头像">
                    </div>
                    <div class="text">
                        <div class="profile">
                            <span class="welcome">Hello
                                <span class="triangle"></span>
                            </span>
                            <h1>江大河</h1>
                            <p>前端开发工程师</p>
                            <hr>
                            <dl>
                                <dt>年龄</dt>
                                <dd>18</dd>
                                <dt>所在城市</dt>
                                <dd>北京</dd>
                                <dt>邮箱</dt>
                                <dd>jiagdaheda2@gmail.com</dd>
                                <dt>手机</dt>
                                <dd>18100000000</dd>
                            </dl>
                        </div>
                    </div>
                </div>   
                    <footer class="media">
                        <a href="#"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jianshu"></use>
                            </svg>
                        </a>
                        <a href="#"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-github"></use>
                            </svg>
                        </a>
                        <a href="#"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-twiter"></use>
                            </svg>
                        </a>
                        <a href="#"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jirengulogogreen"></use>
                            </svg>
                        </a>
                        <a href="#"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-facebook"></use>
                            </svg>
                        </a>
                        <a href="#"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tumblr"></use>
                            </svg>
                        </a>
                        <a href="#"><svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-weibo"></use>
                            </svg>
                        </a>
                    </footer>
                  
            </div>

            <a class="button" href="#">下载PDF简历</a>
            <p>
                    TCP 对应用进程一次把多长的报文发送到TCP 的缓存中是不关心的 TCP 根据对方给出的窗口值<br>
                    和当前网络拥塞的程度来决定一个报文段应包含多少个字节<br>
                    (UDP 发送的报文长度是应用进程给出的) 
            </p>
        </main>
        <section>
           <h2>技能</h2>
           <ol>
               <li>HTML 5&amp;css 3</li>
               <li>Javascript</li>
               <li>jQuery</li>
               <li>Vue</li>
               <li>React</li>
               <li>HTTP</li>
           </ol> 
         </section>
         <section>
             <h2>作品集</h2>
             <nav>
                <ol>
                    <li>所有</li>
                    <li>框架</li>
                    <li>原生JS&apm;CSS</li>
                </ol>
             </nav>
             <div class="jobs">
                 <div class="big"></div>
                 <div class="small"></div>
                 <div class="small"></div>
             </div>
         </section>
    </body>
</html>